<template>
	<view>
		<!-- 搜索 -->
		<view class="search-box">
			<mySearch></mySearch>
		</view>

		<!-- 轮播图的数据列表 -->
		<view class="uni-margin-wrap">
			<navigator :url="`/subGoodsDetail/goods_detail/goods_detail?goods_id=${navigator_item.goods_id}`"
				:open-type="navigator_item.open_type" hover-class="none">
				<swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="2000" duration="500">
					<swiper-item v-for="(item,goods_id_index) in swiperList" :key="item.goods_id">
						<image class="swiper_image" :src="item.image_src" mode="aspectFill" @click="image_url(item)" 	:show-menu-by-longpress='true'></image>
					</swiper-item>
				</swiper>
			</navigator>
		</view>
		<!-- 分类导航的数据 -->
		<view class="nav-list">
			<image :src="item.image_src" class="nav-img" @click="navClickHandler(item)" v-for="(item,catitems_index) in catitems"
				:key="catitems_index" 	></image>
		</view>
		<!-- 获取楼层数据 -->
		<view class="floor-list">
			<view class="floor-item" v-for="(item,floorList_index) in floorList" :key="floorList_index">
				<image mode="widthFix" :src="item.floor_title.image_src"></image>
				<view class="floor-img-box">

					<view class="left-img-box" @click="goodtitle(item)">
						<image :src="item.product_list[0].image_src" :style="{'width' : item.product_list[0].image_width + 'rpx'}"
							mode="widthFix"	:show-menu-by-longpress='true'></image>
					</view>

					<view class="right-img-box">
						<view class="" @click="goodList(item_list)" v-for="(item_list,product_list_index) in item.product_list" :key="product_list_index"
							v-if="product_list_index !='0' && product_list_index != '4'">
							<image mode="widthFix" :src="item_list.image_src" :style="{'width': item_list.image_width + 'rpx'}" 	:show-menu-by-longpress='true'>
							</image>
						</view>

						<view class="" @click="goodList(item.product_list[4])">
							<image :src="item.product_list[4].image_src" :style="{'width' : item.product_list[4].image_width + 'rpx'}"
								mode="widthFix" 	:show-menu-by-longpress='true'></image>
						</view>

					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				swiperList: [], //轮播图的数据列表
				catitems: [], //分类导航的数据
				floorList: [], // 获取楼层数据
				navigator_item: {}, //轮播图url跳转
			}
		},
		onLoad() {

			if (this.accountNumber.length == 0) {

				this.addAccountNumber({
					username: 'admin',
					password: '123456',
					phone: '15678831312'
				}) //初始化账号
				uni.switchTab({
					url: "/pages/my/my"
				})

			}


			this.getSwiperList() //获取轮播图数据的方法
			this.getNavList() //获取分类导航的数据
			this.getFloorList() //获取楼层数据
		},
		onShow() {
			uni.$setNavigationBarColor('tabBar')

			//tabBar数字图标显示
			uni.$setTabBarBadge()
			uni.$logon()
		},
		computed: {
			...mapState('login', ["accountNumber"])
		},
		methods: {
			//跳转
			goodList(item) {

				let keyword = item.navigator_url.split("=")
				uni.navigateTo({
					url: "/subGoodsDetail/goods_list/goods_list?keyword=" + keyword[1]
				})
			},
			goodtitle(item) {
				let a = item.floor_title.name.charAt(3)
				let b = item.floor_title.name.charAt(2)
				uni.navigateTo({
					url: "/subGoodsDetail/goods_list/goods_list?keyword=" + b + a
				})
			},
			...mapMutations("login", ["addAccountNumber"]),
			//获取轮播图数据的方法
			async getSwiperList() {
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/home/swiperdata')

				if (res.meta.status !== 200) { //请求失败
					return uni.$showToast(res.meta.msg, "error")
				}
				uni.$showToast(res.meta.msg)
				this.swiperList = res.message //请求成功，为 data 中的数据赋值
			},
			//分类导航的数据
			async getNavList() {
				const {
					data: res
				} = await uni.$http.get("/api/public/v1/home/catitems")

				if (res.meta.status !== 200) { //请求失败
					return uni.$showToast(res.meta.msg, "error")
				}
				this.catitems = res.message

			},
			//获取楼层数据
			async getFloorList() {
				const {
					data: res
				} = await uni.$http.get("/api/public/v1/home/floordata")
				if (res.meta.status !== 200) { //请求失败
					return uni.$showToast(res.meta.msg, "error")
				}
				this.floorList = res.message
			},
			//轮播图url跳转
			image_url(item) {
				this.navigator_item = item
			},
			//nav-item 项被点击时候的事件处理函数
			navClickHandler(item) {
				let a = item.name.charAt(1)
				let b = item.name.charAt(0)
				uni.navigateTo({
					url: "/subGoodsDetail/goods_list/goods_list?keyword=" + b + a
				})
			}
		},
		//下拉加载
		onPullDownRefresh() {
			this.getSwiperList()
			uni.stopPullDownRefresh()
		},
	}
</script>

<style lang="scss">
	.swiper {
		height: 330rpx;
		width: 100%;

		.swiper_image {
			width: 100%;
			height: 100%;
		}
	}

	.nav-list {
		display: flex;
		justify-content: space-around;
		margin: 15px 0;

		.nav-img {
			width: 128rpx;
			height: 140rpx;
		}
	}

	.floor-title {
		height: 60rpx;
		width: 100%;
		display: flex;
	}

	.floor-img-box {
		display: flex;
		padding-left: 10rpx;

		.right-img-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
		}
	}

	.search-box {
		position: sticky;
		z-index: 9999;
		top: 0;
	}
</style>